<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    

<!DOCTYPE>
<html>
<!--教师端个人中心中的发消息 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/other.css" />
<link rel="stylesheet" href="../../css/home.css" />
<link rel="stylesheet" href="../../css/window.css" />
<link rel="stylesheet" href="../../font-awesome-4.6.3/css/font-awesome.min.css" />
 <link rel="stylesheet" href="../../ztree/css/metroStyle/metroStyle.css" type="text/css">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/header.js"></script>
<script src="../../js/window.js"></script>
<script src="../../js/imgs_show.js" ></script>
<script type="text/javascript" src="../../ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../ztree/js/jquery.ztree.excheck.js"></script>
<style>
   div.the_rcontainer div.the_rlcontainer,
   div.the_rcontainer div.the_rrcontainer{
       float:left;
       min-height:10em;
       padding-top:1em
   }
   div.the_rcontainer div.the_rlcontainer{
      width:calc(100% - 16em);
   }
   div.the_rcontainer div.the_rrcontainer{
      width:14em;
      margin-left:1em;
      padding-left:1em;
   }
    div.the_rlcontainer label{
      margin-left:2em;
      float:left
    }
   div.the_rlcontainer div.objects_input{
     border: 1px solid #b7b6b6;
     border-radius: 0.1em;
     float: left;
     line-height: 1.8;
     min-height: 1.8em;
     padding: 0 0.7em;
     width: calc(100% - 9.4em);
     text-align: left;
      word-break: break-all;
   }

   div.the_rlcontainer div.objects_input input{
       padding:0.2em;
       border:0;
       cursor:default;
       font-size:1em
   }
  .Input_Box {
	border: 1px solid #b7b6b6;
    border-radius: 0.1em;
    height: 21em;
    overflow: hidden;
    position: relative;
    width: calc(100% - 8em);
}
.Input_Foot {
	background-color: #fff;
    border-top: 1px solid #b7b6b6;
    height: 35px;
    position: absolute;
    width: 100%;
}
.imgBtn {
	float: left;
	margin-top: 8px;
	margin-left: 10px;
	background-image: url(../../img/imgs.png);
	background-repeat: no-repeat;
	background-position: 0 -30px;
	height: 18px;
	width: 20px;
	cursor: pointer
}
.imgBtn:active {
	margin-top: 9px;
}
.imgBtn:hover {
	background-position: 0 -31px
}
.postBtn {
	float: right;
	font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
	padding: 8px 30px 8px;
	border-left: 1px solid #b7b6b6;
	cursor: pointer;
}
.postBtn:hover {
	color: #333;
	background-color: #efefef;
}
.faceDiv {
	width: 500px;
	height: 120px;
	border-top: 1px solid #b7b6b6;
	position: absolute;
	background-color: #fff;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.Input_text{
    height: 17.9em;
    padding: 0.5em;
    text-align: left;
    width: calc(100% - 1em);
    overflow-y:auto;
    word-break: break-all;
     background: #fff url("../../img/qq_mail.gif") repeat-x scroll 0 -162px;
}
.Input_text>img{
    width: 24px;
	height: 24px;
	vertical-align: -6px;
}
.faceDiv>img {
	border: 1px solid #b7b6b6;
	float: left;
	margin-left: -1px;
	margin-top: -1px;
	position: relative;
	width: 24px;
	height: 24px;
	padding: 3px 3px 3px 3px;
	cursor: pointer;
}
.faceDiv>img:hover {
	background-color: #efefef;
}
.faceDiv>img:active {
	padding: 4px 3px 2px 3px;
}
div.Input_Foot a.length_control{
    border-left: 1px solid #b7b6b6;
    float: right;
    line-height: 2;
    padding: 0 0.6em;
}
div.the_rrcontainer input:nth-child(1){
    border: 1px solid #b7b6b6;
    margin: 2em 0 1em 0;
    padding: 0.2em 0.4em;
    width:100%;
    width: calc(100% - 0.8em)\9;
    }
 div.the_rrcontainer input+i.fa{
    margin-left:-1.5em;
    color:#b7b7b7;
    cursor:pointer;
 }
 div.the_rrcontainer div.the_objects{
    height:29.5em;
    border:1px solid #b7b6b6;
    width:100%;
    font-size:0.9em;
 }
 div.the_objects p:nth-child(1){
    background:#e3f4fb;
    margin:0em;
    padding:0.5em 0.7em;
 }
 div.the_objects ul.my_tree{
     list-style-type:none;
     margin:0
  }
 div.the_objects ul.my_tree li{
     cursor:pointer;
     border-bottom:1px solid #efefef;
     margin: 0.4em;
     padding-bottom: 0.3em;
   }
 ul.ztree li a:hover{
    text-decoration:none
 }
 ul.ztree li a span.button {
    display:none
  }
  div.div_txt + lable{
    color: red;
    display: block;
    float: left;
    font-size: 0.9em;
    margin-bottom: 0.5em;
    margin-left: 8em;
    margin-top: 0.3em;
    width: 100%;
    }

.div_txt {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff url("../../img/qq_mail.gif") repeat-x scroll 0 -162px;
    border-color: #7c7c7c #c3c3c3 #c3c3c3 #9a9a9a;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    font-family: Tahoma;
    height: auto;
    min-height: 18px;
    padding: 4px 1px;
     width: calc(100% - 8.1em);
     float:left
}
.div_txt input {
    background-color: transparent;
}
.div_txt .fn_list {
    padding: 0;
}
.div_txt_on {
    background: #fafae1 url("/zh_CN/htmledition/images/newicon/today1e9c5d.gif") repeat-x scroll 0 -162px;
}
.addr_text {
    background: transparent none repeat scroll 0 0;
    height: 16px;
    margin: 1px -13px 1px 0;
}
.addr_text input {
    background: transparent none repeat scroll 0 0;
    font-family: Tahoma;
}
.addr_base{
    float:left;
    white-space:nowrap;
    vertical-align: 1px;
    margin-right:0.4em;
    font-size:0.9em;
}
.addr_base:hover{
  background:#dceac0;
  cursor:default
}
.addr_base b {
    color: #000;
    font-weight: normal;
    margin-right:0.1em
}
input.js_input{
     border:none;
     outline:none;
     -webkit-appearance:none;
     width:100%;
 }
</style>
<title>智行校园-精准化服务平台</title>
</head>
<body >
<input id="the_value" value="消息" style="display:none"/>
<div class="the_container">
	<div class="the_lcontainer col-2"></div>
	<div class="the_rcontainer " style="padding-right:4em;width:calc(100% / 9 * 8 - 8em)">
	    <div class="the_rlcontainer">
	       <h3 style="margin: 0 0 2em;">发消息</h3>
	       <label>发送对象：</label>
	       <div id="toAreaCtrl" class="noime div_txt" style="cursor: text;">
               <div style="position: absolute; color: rgb(160, 160, 160); padding-top: 1px;"></div>
                 <div class="addr_text" style="float: left; border: medium none; overflow: hidden; width: 2px;">
                   <input class="js_input"   accesskey="t" tabindex="1" autocomplete="off" type="input" >
                 </div>
          </div>
	       <lable>点击右侧菜单选择消息发送对象</lable>
	       <label>发送内容：</label>
	       <div class="Input_Box">
             <div contenteditable="true" class="Input_text"></div>
             <div class="faceDiv"> </div>
             <div class="Input_Foot"> 
                 <a class="imgBtn" ></a>
                 <a class="postBtn">确定</a> 
                 <a class="length_control" data_value="2000">0/2000</a>
             </div>
           </div>
	    </div>
	    <div class="the_rrcontainer">
	       <input placeholder="查找搜索对象 "/><i class="fa fa-search"  ></i>
	       <div class="the_objects">
	            <p>发送对象</p>
	            <ul id="treeDemo" class="ztree" style="height:26.5em; overflow: auto;"></ul>   
	       </div>
	    </div>
	</div>
</div>
<script src="../../js/leftcol_own.js"></script>
<script>
var count_back=0;
$('#toAreaCtrl').bind('click hover',function(){
	the_input_action();
});
function the_input_action(){
	$('input.js_input').focus();
	$('input.js_input').unbind('keydown').bind('keydown', function(event) { 
		$('input.js_input').val('');
		 if($(this).parent().prev('.addr_normal').length>0){
			if(event.which=='8'){
		      if(count_back==0){
	    	    $(this).parent().prev().css({'background':'#87a34d','color':'white'})
	    	       .siblings('.addr_normal').css({'background':'white','color':'black'}).children('b').css({'color':'black'}); 
		        $(this).parent().prev().children('b').css({'color':'white'});
		        count_back++;
		     }
		     else{
			   $(this).parent().prev().remove();
			   count_back=0;
		    }
		  }
		  else if(event.which=='46'&& count_back==1){
				 $(this).parent().prev().remove();
				 count_back=0;
			 }	
		 }
		
	});}

var user_id="324234";
var setting = {
        view: {
            selectedMulti: true
        },
        async: {
            enable:true,
            type: "post",
            url: "../../jsp/connect_objects.json",
            autoparam:["id","pId"],
            otherParam:["name","the_code","operate"] 
         },
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey : "id", 
                pIdKey : "pId"
            }
        },
        callback: {
    		onClick: zTreeOnClick,
    		beforeExpand: beforeExpand
    	}
    };
ImgIputHandler.Init('Input_text','postBtn');
  $.fn.zTree.init($("#treeDemo"), setting);

$('div.the_rrcontainer i.fa-search').click(function(){
	search_object($(this).prev().val());
});

$('div.the_rrcontainer i.fa').prev().bind('input propertychange ',function(){
	search_object($(this).val());
});
function search_object(search_data){
	if(search_data!=''){
		  $('div.the_rrcontainer i').removeClass('fa-search').addClass('fa-remove');
		  $('div.the_rrcontainer i.fa-remove').click(function(){
				$(this).prev().val('');
				$('div.the_rrcontainer i').addClass('fa-search').removeClass('fa-remove');
				$('div.the_objects p').text('发送对象');
				$('#treeDemo').empty().removeClass('my_tree').addClass('ztree');
				$.fn.zTree.init($("#treeDemo"), setting);
			});
		  $('div.the_objects p').text('查找结果：');
		  $('#treeDemo').empty().removeClass('ztree').addClass('my_tree');
		  $.ajax({
			  url:'../../jsp/connect_objects3.json',
			  data:{param1:user_id,param2:search_data},
			  type:'post'
		  }).done(function(data){
			  $('#treeDemo').empty();
			 for(var s1=0;s1<data.length;s1++)
			   $('#treeDemo').append('<li data-value1="'+data[s1].id+'" data-value2="'+data[s1].code+'">'+ data[s1].name+'</li>');
			   $('#treeDemo li').click(function(){
				   judge_input($(this).attr('data-value1'),$(this).attr('data-value1'),$(this).text());
			   });
		  });
		}
		else{
			$('div.the_rrcontainer i').addClass('fa-search').removeClass('fa-remove');
			$('div.the_objects p').text('发送对象');
			$('#treeDemo').empty().removeClass('my_tree').addClass('ztree');
			$.fn.zTree.init($("#treeDemo"), setting);
		}
};
$('.the_rlcontainer div.Input_text').unbind('input  propertychange').bind('input  propertychange keyup', function() {
	 if($('.the_rlcontainer div.Input_text').html()=='<br>'){
		$(this).empty();
		$('.Input_Foot a.length_control').text('0/'+$('.Input_Foot a.length_control').attr('data_value'));
		}
      else if($('.Input_Foot a.length_control').attr('data_value')<=$(this).html().length){
		    $('.Input_Foot a.length_control').css('color','red');
		    if($('.Input_Foot a.length_control').attr('data_value')==$(this).html().length)
		    	$('.Input_Foot a.length_control').text($(this).html().length+'/'+$('.Input_Foot a.length_control').attr('data_value'));
		    else
		    	$('.Input_Foot a.length_control').text('已超过' +($(this).html().length-$('.Input_Foot a.length_control').attr('data_value'))+'个字');
		}
	   else{
		   $('.Input_Foot a.length_control').css('color','black');
		   $('.Input_Foot a.length_control').text($(this).html().length+'/'+$('.Input_Foot a.length_control').attr('data_value'));
	   }
		   
});
$('.Input_Foot a.postBtn').click(function(){
	  var the_connect=$('.the_rlcontainer input:eq(0)').val();
	  var the_message=$('.the_rlcontainer div.Input_text').html();
	  if(the_connect==''||the_message=='')
		  win.alert("系统提示","请保证信息完整再提交！");
	  else{
		  alert(the_connect);
		  alert(the_message);
	  }
});

    function zTreeOnClick(event, treeId, treeNode) {
    	
    	judge_input(treeNode.the_code,treeNode.sign,treeNode.name);
    };
    function beforeExpand(treeId, treeNode) {
		if(treeNode.operate=='1'){
			//alert(treeNode.the_code);
			 $.fn.zTree.getZTreeObj("treeDemo").setting.async.url='../../jsp/connect_objects2.json';
		}
	};
	function judge_input(code,sign,name){
		$the_father=$(' div#toAreaCtrl');
		var the_length=$the_father.find('div.addr_normal').length;
		if(the_length>=1){
		 for(var n=0;n<the_length;n++){
			 if(($the_father.find('div.addr_normal:eq('+n+')').attr('title')!=code||$the_father.find('div.addr_normal:eq('+n+')').attr('title')==code&&$the_father.find('div.addr_normal:eq('+n+')').attr('data-value')!=sign) && n==(the_length-1))
			     $('div#toAreaCtrl .addr_text').before('<div class="addr_base addr_normal" title="'+code+'" data-value="'+sign+'" unselectable="on"><b unselectable="on" >'+name+'</b><span>;</span></div>');
			 else if($the_father.find('div.addr_normal:eq('+n+')').attr('title')==code&&$the_father.find('div.addr_normal:eq('+n+')').attr('data-value')==sign)
				break;
		}}
	    if(the_length==0)
			$('div#toAreaCtrl .addr_text').before('<div class="addr_base addr_normal" title="'+code+'"  data-value="'+sign+'" unselectable="on"><b unselectable="on" >'+name+'</b><span>;</span></div>');
		$('div.addr_normal').click(function(){
			  $(this).css({'background':'#87a34d','color':'white'})
   	               .siblings('.addr_normal').css({'background':'white','color':'black'}).children('b').css({'color':'black'}); 
			  $(this).children('b').css({'color':'white'});
		      count_back=1;
		 });
		 the_input_action();
	}
</script>
</body>
</html>